import {Card} from 'antd'
import styles from './index.module.less'
import {
  Button,
  Form,
} from 'antd';
import {SearchConfig,ConfigType} from './SearchConfig'
export default function MySrarch  (props:{searchConfig:ConfigType[],onFinish?:Function}) {
  const [form] = Form.useForm();
  const handleFinish = (values: any) => {
    if(props.onFinish){
      props.onFinish(values);
  }
  };
  // 重置表单 
  const handleReset = () => {
    form.resetFields(); // 重置表单
  }
  return (
    <Card className='mb-2'>
      <Form
      form={form}
      className=' flex flex-col'
        onFinish={handleFinish}
        layout="inline">
          <div className={styles.searchBox}>
            {/* 遍历传入列表，渲染对应类型 */}
            {props.searchConfig.map((res:ConfigType,index:number)=>{
              return <div key={index}><SearchConfig  {...res}></SearchConfig></div>
            })}
          </div>
        <div className='flex justify-end'>
          <Button onClick={handleReset} className='mr-2' >重置</Button>
          <Button htmlType="submit">搜索</Button>
        </div>
      </Form>

    </Card>
  )
}
